<template>
  <div class="mian">
    <el-card style="height: 100%">
      <search-tool @onSearch="handleSearch" :system="Code"></search-tool>
      <div class="add">
        <el-button type="primary" @click="addwarehouse">添加</el-button>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        height="75%"
        v-loading="loadingShow"
      >
        <el-table-column type="index" width="50" label="序号" />
        <el-table-column prop="sparePartId" label="备件编号" />
        <el-table-column prop="sparePartName" label="备件名称" />
        <el-table-column prop="system" label="所属系统">
          <template #default="{ row }">
            {{
              row.system === '01'
                ? '消防系统'
                : row.system === '02'
                ? '通风系统'
                : row.system === '03'
                ? '通信系统'
                : row.system === '04'
                ? '供电系统'
                : row.system === '05'
                ? '照明系统'
                : row.system === '06'
                ? '排水系统'
                : row.system === '07'
                ? '其他系统'
                : ''
            }}
          </template>
        </el-table-column>
        <el-table-column prop="number" label="备件数量" />
        <el-table-column prop="deliveryTime" label="出库时间" />
        <el-table-column prop="reasonforclaim" label="申领原因" />
        <el-table-column prop="claimName" label="申领人" />
      </el-table>
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[5, 10, 20]"
        :page-size="size"
        layout="prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <AddDialog
      :title="title"
      v-model:visible="visibleViewDialog"
      :system="Code"
      @onReload="reloadPage"
    ></AddDialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import SearchTool from './components/SearchToll/index.vue'
import { RecordList, stateCode } from '@/api/equipment'
import AddDialog from './components/AddDialog/index.vue'
const tableData = ref([])
const total = ref(0)
const page = ref(1)
const size = ref(8)
const params = ref({})
const Code = ref()
const loadingShow = ref(false)
const title = ref('新增出库记录')
const visibleViewDialog = ref(false)
const state = () => {
  stateCode({
    code: '',
    type: 4
  }).then((res) => {
    Code.value = res
  })
}
state()
// 查询数据
const getListData = (params) => {
  loadingShow.value = true
  RecordList(params, page.value, size.value).then((res) => {
    tableData.value = res.rows
    total.value = res.total
  })
  loadingShow.value = false
}

const reloadPage = () => {
  getListData(params.value)
  if (visibleViewDialog.value) {
    visibleViewDialog.value = false
  }
}
reloadPage()
// 新增出库记录
const addwarehouse = () => {
  visibleViewDialog.value = true
}
//查询条件相关
const handleSearch = (paramsData) => {
  params.value = paramsData
  getListData(paramsData)
}
// 分页相关
/**
 * size 改变触发
 */
const handleSizeChange = (currentSize) => {
  size.value = currentSize
  getListData(params.value)
}

/**
 * 页码改变触发
 */
const handleCurrentChange = (currentPage) => {
  page.value = currentPage
  getListData(params.value)
}
</script>

<style lang="scss" scoped>
.mian {
  width: 100%;
  height: 100%;
  .add {
    margin-bottom: 24px;
  }
  .pagination {
    width: 100%;
    height: 32px;
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: end;
  }
}
:deep(.el-input__icon) {
  line-height: 36px;
}
</style>
